<template>
  <view :style="viewColor" class="components-body" v-if="coupon?.coupon" @click="close">
    <view
      class="coupon-list-window animated"
      @click.stop
      :class="coupon?.coupon == true ? 'slideInUp' : ''"
    >
      <view class="title">
        <view class="item">优惠券<text class="iconfont icon-guanbi" @tap="close"></text></view>
      </view>
      <view class="coupon-list" v-if="coupon?.list?.length">
        <view
          class="item acea-row row-center-wrapper"
          v-for="(item, index) in coupon?.list"
          @click="getCouponUser(index, item)"
          :key="index"
        >
          <view
            class="money acea-row row-column row-center-wrapper"
            :style="{ 'background-image': `url(${domain}/static/diy/couponBg${keyColor}.png)` }"
          >
            <view
              >￥<text class="num">{{ item?.coupon_price }}</text></view
            >
            <view class="pic-num">满{{ item?.use_min_price }}元可用</view>
          </view>
          <view class="text">
            <view class="condition line1">
              <span class="line-title" v-if="item?.type === 0">店铺券</span>
              <span class="line-title" v-else-if="item?.type === 1">商品券</span>
              <span class="line-title" v-else-if="item?.type === 10">平台通用券</span>
              <span class="line-title" v-else-if="item?.type === 11">平台品类券</span>
              <span class="line-title" v-else-if="item?.type === 12">平台跨店券</span>
              <span class="line-title" v-else-if="item?.type === 14">跨平台通用券</span>
              <span>{{ item?.title }}</span>
            </view>
            <view class="data acea-row row-between-wrapper">
              <block v-if="item?.coupon_type == 1">
                <view>{{ item?.use_start_time | timeYMD }}-{{ item?.use_end_time | timeYMD }}</view>
              </block>
              <block v-if="item?.coupon_type == 0">
                <view>领取后{{ item?.coupon_time }}天内可用</view>
              </block>
              <view class="gray iconfont icon-yilingqu2" v-if="item?.issue"></view>
              <view class="bnt b-color" v-else>{{ coupon?.statusTile || '立即领取' }}</view>
            </view>
          </view>
        </view>
      </view>
      <!-- 无优惠券 -->
      <view class="pictrue" v-else>
        <image src="@/static/shop/noCoupon.png"></image>
      </view>
    </view>
    <!-- <view class="mask" catchtouchmove="true" :hidden="coupon.coupon == false" @click="close"></view> -->
  </view>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { setCouponReceive } from '@/api/shop/api.js'
// import { mapGetters } from "vuex";
import { HTTP_REQUEST_URL } from '@/config/app'
export default {
  props: {
    //打开状态 0=领取优惠券,1=使用优惠券
    openType: {
      type: Number,
      default: 0,
    },
    coupon: {
      type: Object,
      default: function () {
        return {}
      },
    },
    showTitle: {
      type: Number,
      default: 1,
    },
    isShop: {
      type: Number,
      default: 0,
    },
    domain: {
      type: String,
      default: HTTP_REQUEST_URL,
    },
  },
  filters: {
    timeYMD: function (value) {
      if (value) {
        var newDate = /\d{4}-\d{1,2}-\d{1,2}/g.exec(value)
        return newDate[0]
      }
    },
  },
  // computed: mapGetters(['viewColor','keyColor']),
  data() {
    return {
      tabList: ['商品券', '店铺券'],
      tabIndex: this.isShop,
      couponArr: [],
      viewColor:
        '--view-theme: #E93323;--view-assist:#FF7612;--view-priceColor:#E93323;--view-bgColor:rgba(255, 118, 18,.1);--view-minorColor:rgba(233, 51, 35,.1);--view-bntColor11:#FDA923;--view-bntColor12:#FD6523;--view-bntColor21:#F11B09;--view-bntColor22:#F67A38;',
      keyColor: '_default',
    }
  },
  mounted() {
    console.log(11111111)
    this.$nextTick(function () {
      this.couponArr = this.coupon.list
      console.log(this.coupon.coupon)
    })
  },
  methods: {
    close: function () {
      this.$emit('ChangCouponsClone')
    },
    getCouponUser: function (index, item) {
      let that = this
      if (item.issue) return true
      switch (this.openType) {
        case 0:
          //领取优惠券
          setCouponReceive(item.coupon_id).then((res) => {
            item.issue = true
            that.$emit('ChangCouponsUseState', index)
            that.$util.Tips({
              title: '领取成功',
            })
            that.$emit('ChangCoupons', item)
          })
          break
        case 1:
          that.$emit('ChangCoupons', index)
          break
      }
    },
    bindTab(item, index) {
      this.tabIndex = index
      this.filterArray()
    },
  },
}
</script>

<style scoped lang="scss">
@import '@/styles/shop.scss';
.components-body {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 555;
  display: flex;
  align-items: flex-end;
}
.animated {
  animation-duration: 0.3s;
}
.title {
  display: flex;
  border-radius: 16rpx 16rpx 0 0;
  .item {
    position: relative;
    flex: 1;
    font-size: 28rpx;
    color: #999999;
    &::after {
      content: ' ';
      position: absolute;
      left: 50%;
      bottom: 18rpx;
      width: 50rpx;
      height: 5rpx;
      background: transparent;
      border-radius: 3px;
      transform: translateX(-50%);
    }
    &.on {
      color: #282828;
      &::after {
        background: var(--view-theme);
      }
    }
  }
}
.b-color {
  background-color: var(--view-theme);
}
.coupon-list {
  padding: 30rpx;
  .item {
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.06);
  }
}
.coupon-list-window {
  width: 100%;
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  // transform: translate3d(0, 100%, 0);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
}
.coupon-list-window.on {
  animation: aminup;
}
.coupon-list-window .title {
  height: 106rpx;
  width: 100%;
  text-align: center;
  line-height: 106rpx;
  font-size: 32rpx;
  font-weight: bold;
  position: relative;
  border: 1px solid #f5f5f5;
}
.coupon-list-window .title .iconfont {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 35rpx;
  color: #8a8a8a;
  font-weight: normal;
}
.coupon-list-window .coupon-list {
  margin: 0 0 50rpx 0;
  height: 550rpx;
  overflow: auto;
}
.coupon-list-window .pictrue {
  width: 414rpx;
  height: 336rpx;
  margin: 0 auto 50rpx auto;
}
.coupon-list-window .pictrue image {
  width: 100%;
  height: 100%;
}
.pic-num {
  color: #fff;
  font-size: 24rpx;
}
.line-title {
  width: 90rpx;
  padding: 0 10rpx;
  box-sizing: border-box;
  background: var(--view-minorColor);
  border: 1px solid var(--view-theme);
  opacity: 1;
  border-radius: 20rpx;
  font-size: 20rpx;
  color: var(--view-theme);
  margin-right: 12rpx;
}
.line-title.gray {
  border-color: #bbb;
  color: #bbb;
  background-color: #f5f5f5;
}
</style>
